<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet sample</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css">
    <script src="./leaflet/leaflet.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 98vh"></div>
    <script>
      // 地图配置项
      var mapOptions = {
        center: [39.9, 116.4], //位置
        zoom: 10, //初始缩放等级
        maxZoom: 18, //最大缩放等级
        minZoom: 3, //最小缩放等级
        zoomControl: false, //缩放控件
        attributionControl: true //版权控件
      }
      // 1.创建地图实例
      /* 
       map('初始化地图dom对象'，'初始化地图配置') 
       */
      let map = new L.map('map', mapOptions)

      // 2.创建瓦片并添加到地图上
      /* 
       载入切片图层tileLayer('地图提供商瓦片'，'瓦片配置项');
       地图类型：https://openwhatevermap.xyz/#3/28.77/47.99；
       */
      var tiles = L.tileLayer(
        'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', //高德
        // 'http://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png',
        {
          attribution:
            '&copy;<a href="https://www.openstreetmap.org/copyright">打开OpenStreetMap</a>,自己看OpenStreetMap开放数据' // 自定义版权标识
        }
      ).addTo(map)

      // 3.添加图形或标注点
      /* 
       marker('位置'，'配置项')————点
       */
      let marker = L.marker([39.9, 116.4], {
        // icon: L.divIcon({ //标志图案
        //   html: `<img src="https://bpic.588ku.com/element_origin_min_pic/01/49/53/26574470367bc75.jpg" style="width: 35px; height:40px"/>`
        // }) //用给定的选项实例化图标
      }).addTo(map)

      /* 
       circle('位置'，'配置项')————中心圆形
       */
      let circle = L.circle([39.9, 116.4], {
        stroke: true, //沿路径绘制描边
        weight: 5, //描边宽度
        color: 'blue', //描边颜色
        opacity: 0.3, //描边颜色透明度
        fillColor: 'pink', //区域颜色
        fillOpacity: 0.8, //区域透明度
        radius: 5000 //区域半径单位米
      }).addTo(map)

      /* 
       polygon('顶点位置'，'配置项')————多边形
       */
      let polygon = L.polygon(
        [
          [39.9, 116.4],
          [39.84, 116.4],
          [39.85, 116.1]
        ],
        {
          color: 'red', //描边颜色
          weight: 1, //描边宽度
          opacity: 0.8, //描边透明度
          fillColor: 'green', //区域颜色
          fillOpacity: 0.5 //区域颜色透明度
        }
      ).addTo(map)

      /* 
       rectangle('矩形边界'，'配置项')————矩形
       */
      let bounds = [
        [39.9, 116.4], //对角起点(右下)
        [39.95, 116.5] //对角终点(左上)
      ]
      let rectangle = L.rectangle(bounds, {
        color: 'yellow', //描边颜色
        weight: 3 // 描边宽度
      }).addTo(map)

      // 3.事件绑定
      /* 
       on('事件类型'，事件回调)————绑定事件
       */
      function onClick(e) {
        window.alert('地图被点击了', e.latlng.toString())
      }
      // map.on('click', onClick)

      // 4.提示
      /* 
         popup()————点击弹框
         setLatLng(位置对象))————弹框位置
         setContent('设置展示内容'))————弹框内容
         openOn(地图))————关联地图
       */
      function onMapClick(e) {
        console.log(e, '事件对象')
        L.popup()
          .setLatLng(e.latlng)
          .setContent('You clickedthe map at ' + e.latlng.toString())
          .openOn(map)
      }
      map.on('click', onMapClick)

      /* 
        bindPopup('标注内容')————标注弹框
        openPopup()————手动触发打开
       */
      marker.bindPopup('这里是北京').openPopup()

      /* 
       bindTooltip('提示内容')————提示弹框
       openTooltip()————打开提示框
       */
      L.marker([39.770548, 116.797028]).addTo(map).bindTooltip('北方')

      // 5.地图类型
      /* 
       control.layers('图层瓦片'，'','配置项')
       */
      // 图层瓦片
      var baseLayers = {
        Sputnik: L.tileLayer(
          'https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}{r}.png',
          { maxZoom: 18 }
        ),
        CartoDBPositron: L.tileLayer(
          'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          {maxZoom: 18 }
        ),
        OSM: L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
          { maxZoom: 18}
        ).addTo(map),
        OpenTopoMap: L.tileLayer(
          'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
          { maxZoom: 18 }
        )
      }
      //切换图层工具
      var layerControl = L.control
        .layers(
          baseLayers,
          {},
          {
            position: 'topleft', //图层工具位置
            collapsed: true //选项合并展示，
          }
        )
        .addTo(map)

      //6.地图加载并显示单个图像或视频
      /* 
       imageOverlay('图像地址'，'图像区域')————显示图像
       */
      var imageUrl =
        'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
      imageBounds = [
        [40, 116],
        [40.5, 116.5]
      ]
      L.imageOverlay(imageUrl, imageBounds).addTo(map)

      /* 
       videoOverlay('视频地址'，'视频区域')————显示视频
       */
      const videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm'
      videoBounds = [
        [40, 116],
        [41, 117]
      ]
      L.videoOverlay(videoUrl, videoBounds).addTo(map)
    </script>
  </body>
</html>
